<template>
    <div class="wrapper">
        <!-- <div class="topWrapper">
            <div class="search">
                <input class="ipt" v-model="nameOrPhone" placeholder="请输入商户姓名/编号" />
                <div class="searchBtn" @click="listenToChildren"><van-icon size="20" name="search" /></div>
            </div>
        </div>
        <div class="detailBox">
            <img src="../../assets/" />
            <div class="center">
                <div>张三</div>
                <div>状态</div>
                <div>13676345043</div>
                <div>商户</div>
            </div>
            <div class="right">
                <div>成本配置</div>
                <div>返现配置</div>
            </div>
        </div> -->
        <div class="topWrapper">
            <van-search @search="listenToChildren" v-model="nameOrPhone" placeholder="请输入搜索关键词" />
        </div>
        <div class="bottomWrapper">
            <empty v-if="!merchantList.length"></empty>
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getQueryList">
                <div class="item" v-for="item in merchantList" :key="item.ID">
                    <div class="top">
                        <div class="left">
                            {{ item.AGENT_NAME }}
                        </div>
                        <div class="right" style="white-space: nowrap">
                            <div @click.stop="toConfig(item)" class="select">
                                <span>成本配置</span>
                                <img src="@/assets/chevron-down@2x.png" mode="" />
                            </div>
                            <div class="select" @click.stop="toSet(item)">
                                <span>返现配置</span>
                                <img src="@/assets/chevron-down@2x.png" mode="" />
                            </div>
                        </div>
                    </div>
                    <div class="bottom" @click="catDetail(item)">
                        <div class="left">
                            <img src="@/assets/index/person.png" alt="" />
                        </div>
                        <div class="right">
                            <div class="number">
                                <img src="@/assets/merchantNumberImg.png" mode="" />
                                <span>服务商编号：{{ item.AGENT_NO }}</span>
                            </div>
                            <div class="phone">
                                <img src="@/assets/merchantPhoneImg.png" mode="" />
                                <span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：{{ space(item.PHONE_NO) }}</span>
                            </div>
                            <div class="state">
                                <img src="@/assets/merchantStateImg.png" mode="" />
                                <span>
                                    状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：
                                    <span style="color: #07c160" v-if="item.STATUS === statusName[0]">审核通过</span>
                                    <span style="color: #eb3941" class="item-last" v-if="item.STATUS === statusName[1]">审核拒绝</span>
                                    <span
                                        style="color: #eb3941"
                                        class="item-last"
                                        v-if="item.STATUS !== statusName[1] && item.STATUS !== statusName[0]"
                                    >
                                        未认证
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script setup name="adminService">
import { queryList } from '@/api/service'
import { showToast } from 'vant'

const router = useRouter()
const state = reactive({})
const nameOrPhone = ref('')
const currentPage = ref(1)
const finished = ref(false)
const loading = ref(false)
const statusName = ref(['TRUE', 'AUDIT_REJECT']) //列表状态
const merchantList = ref([])
const getQueryList = () => {
    queryList({
        currentPage: currentPage.value,
        nameOrPhone: nameOrPhone.value
    }).then(res => {
        if (res.object.length < 10) {
            finished.value = true
            loading.value = false
        } else {
            currentPage.value++
            finished.value = false
            loading.value = false
        }

        merchantList.value = merchantList.value.concat(res.object)
    })
}
const space = name => {
    return name ? name.substr(0, 3) + '****' + name.substr(7) : name
}
const catDetail = item => {
    if (!item.AGENT_NAME) {
        showToast('该用户暂未认证')
        return
    }
    router.push({
        path: '/agentDetail',
        query: {
            agentNo: item.AGENT_NO
        }
    })
}
const listenToChildren = () => {
    merchantList.value = []
    finished.value = true
    loading.value = true
    currentPage.value = 1
    getQueryList()
}
// 成本配置
const toConfig = item => {
    if (!item.AGENT_NAME) {
        showToast('该用户暂未认证，无法配置成本')
        return
    }

    router.push({
        path: '/coseConfig',
        query: {
            agentNo: item.AGENT_NO
        }
    })
}
// 返现配置
const toSet = item => {
    // showToast('功能调试中，敬请期待！')
    // return;

    if (!item.AGENT_NAME) {
        showToast('该用户暂未认证，无法配置成本')
        return
    }
    console.log(item.CLASSES_ID)
    router.push({
        path: '/cashBack',
        query: {
            agentNo: item.AGENT_NO,
            classesId: item.CLASSES_ID
        }
    })
}
</script>

<style scoped lang="scss">
// .search {
//     width: 95%;
//     margin: 0 auto;
//     display: flex;
//     align-items: center;
//    margin-top: 9px;
//     .ipt{
//         background-color: #fff;
//         flex: 1;
//         height: 34px;
//         border-radius: 17px 0 0 17px;
//         padding-left: 25px;
//     }
//     .searchBtn {
//         display: flex;
//         justify-content: center;
//         align-items: center;
//         width: 70px;
//         height: 34px;
//         background: #66d6ff;
//         opacity: 1;
//         border-radius: 0px 17px 17px 0px;
//         color: #fff;
//     }
// }
// .detailBox{
//     padding: 10px 15px;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     .center{

//     }
// }
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .bottomWrapper {
        overflow: scroll;
        flex: 1;
        padding: 0 10px;
        box-sizing: border-box;

        .item {
            margin-top: 10px;
            background: #ffffff;
            opacity: 1;
            border-radius: 6px;
            padding: 0 10px;

            .top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #e4e4e4;

                .left {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .right {
                    display: flex;
                    align-items: center;
                    color: #66d6ff;

                    .select:nth-child(2) {
                        margin-left: 10px;
                    }

                    img {
                        width: 20px;
                    }

                    div {
                        display: flex;
                        align-items: center;
                    }
                }
            }

            .bottom {
                display: flex;
                align-items: center;
                padding: 10px;

                .left {
                    img {
                        width: 40px;
                    }
                }

                .right {
                    padding: 0 10px;
                    line-height: 30px;
                    font-size: 13px;

                    img {
                        width: 15px;
                        margin-right: 5px;
                    }

                    .number,
                    .phone,
                    .state {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
}
</style>
